// 词云图自定义指标
import React from 'react';
import FormItem from 'antd/lib/form/FormItem';
import { InputNumber } from 'antd';
import { filterObjectNullKeys } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const WordCustomIndicator = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;
	const onBlur = () => {
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (
		<>
			<FormItem
				label="最大字体"
				name="maxFontSize"
				labelAlign="left"
				// labelCol={{ span: 15 }}
				// wrapperCol={{ span: 9 }}
			>
				<InputNumber
					onBlur={onBlur}
					onPressEnter={onBlur}
					defaultValue={32}
					style={{ width: '100%' }}
					min={0}
					placeholder="Enter生效"
				/>
			</FormItem>
			<FormItem
				label="最小字体"
				name="minFontSize"
				labelAlign="left"
				// labelCol={{ span: 15 }}
				// wrapperCol={{ span: 9 }}
			>
				<InputNumber
					onBlur={onBlur}
					onPressEnter={onBlur}
					style={{ width: '100%' }}
					defaultValue={16}
					min={0}
					placeholder="Enter生效"
				/>
			</FormItem>
			<FormItem
				label="字符间距"
				name="charSpacing"
				labelAlign="left"
				// labelCol={{ span: 15 }}
				// wrapperCol={{ span: 9 }}
			>
				<InputNumber onBlur={onBlur} onPressEnter={onBlur} defaultValue={1} style={{ width: '100%' }} min={0} placeholder="Enter生效, 单位px" />
			</FormItem>
		</>
	);
};

export default React.memo( WordCustomIndicator );
